<template>
    <div class="secondary-comment">
        <div class="comment-header">
            <img :src="comment.author_image || '/public/4.jpg'" class="comment-avatar" alt="用户头像">
            <div class="user-info">
                <div class="name-line">
                    <span class="username">{{comment.s_username || "匿名"}}</span>
                    <span class="test-position" v-if="comment.double_two!=='0'">
                        <Icon type="ios-redo-outline" /> {{comment.double_two}}</span>
                </div>
                <span class="comment-date">{{formatDate(comment.date)}}</span>
            </div>
        </div>
        
        <div class="comment-content">
            {{comment.content}}
        </div>
        <div class="comment-actions">
            <button 
            :class="isLiked==1 ? 'action-btn like-btn liked': 'action-btn like-btn unliked' " 
            @click="toggleLike">
                <span><Icon type="md-heart-outline" />  </span> 
                <span>{{ likeCount }}</span>
            </button>
            <button class="action-btn reply-btn" @click="showReplyBox = !showReplyBox">
                <span><Icon type="ios-undo-outline" /></span>
                <span>回复</span>
            </button>
        </div>
        <div class="reply-box" v-if="showReplyBox">
            <textarea v-model="replyContent" style="resize: none;" placeholder="回复..."></textarea>
            <div class="reply-actions">
                <button class="cancel-btn" @click="showReplyBox = false">取消</button>
                <button class="submit-btn" @click="submitReply">提交</button>
            </div>
        </div>
        
        <div class="nested-comments" v-if="comment.replies && comment.replies.length">
            <SecondaryCommentList 
                v-for="reply in comment.replies" 
                :key="reply.id" 
                :comment="reply" 
            />
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref,inject ,defineEmits} from 'vue';
import { set_text_comments_s_like,put_text_comments_second} from"@/api/community/main.js";
import { failure } from '@/static/js/alert';
const emits = defineEmits(['update-newcomment'])
const user= inject('user')()
const props = defineProps({
    comment: {
        type: Object,
        required: true
    },
    user: {
        type: Object,
        default: () => { }
    },
    
});

const likeCount = ref(props.comment.like_count || 0);
const isLiked = ref(props.comment.user_to_comment?.like || 0);
const truelike = ref(props.comment.user_to_comment?.like || 0);
const showReplyBox = ref(false);
const replyContent = ref('');

const formatDate = (dateString) => {
    const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
    return new Date(dateString).toLocaleDateString(undefined, options);
};
const toggleLike = async () => {
    if (!props?.user) { failure("未登录!"); return}
    isLiked.value =isLiked.value ? 0 : 1;
    likeCount.value += isLiked.value ? 1 : -1;
    const judge = await set_text_comments_s_like(
         props.comment.uuid,
         props?.user?.get_user()?.id, truelike.value ? 0 : 1)
         if (judge == 0) { 
        isLiked.value =isLiked.value ? 1 : 0
        likeCount.value += isLiked.value ? -1 : 1;
    }
    truelike.value = isLiked.value
};
const submitReply =async () => {
   if (!replyContent.value.trim()) return;
    // 这里应该是调用API提交回复的逻辑
    const data = await put_text_comments_second(
        props.comment.id,
        props.comment.author, user.value.get_user().id
        , replyContent.value, props.comment.f_uuid,
        user.value.get_user().id)
    emits('update-newcomment', data)
    props.comment.reply_count++ || (props.comment.reply_count = 1)
    // 清空并关闭回复框
    replyContent.value = '';
    showReplyBox.value = false;
};
onMounted(() => {
//   console.log(props.comment)
})
</script>

<style scoped>
.secondary-comment {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    position: relative;
}

.secondary-comment::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 20px;
    width: 16px;
    height: 1px;
    background-color: #e0e0e0;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.name-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.username {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.test-position {
    font-size: 12px;
    color: #999;
}

.comment-date {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.comment-content {
    word-break: break-word; /* 长单词自动换行 */
    overflow-wrap: break-word; /* 兼容旧浏览器 */
    white-space: pre-wrap; /* 保留换行符，同时允许自动换行 */
    margin-bottom: 10px;
    padding: 0 4px;
    line-height: 1.4;
    color: #333;
    font-size: 13px;
}

.comment-actions {
    display: flex;
    gap: 12px;
    padding: 6px 0;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background-color: #f0f0f0;
}

.action-btn .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.like-btn.active, .like-btn:hover {
    color: #ff2442;
}

.reply-btn:hover {
    color: #1890ff;
}

.reply-box {
    margin-top: 8px;
    padding: 8px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.reply-box textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-size: 13px;
}

.reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.reply-actions button {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.cancel-btn {
    background: none;
    border: 1px solid #ddd;
    color: #666;
}

.submit-btn {
    background-color: #1890ff;
    border: 1px solid #1890ff;
    color: white;
}

.nested-comments {
    margin-top: 12px;
    padding-left: 20px;
    border-left: 2px solid #e0e0e0;
}
.liked{
    color:red;
}
.unliked{
    color: black;
}
</style>